{% load static %}
{% load i18n %}
{% load authentik_core %}

<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        {# Darkreader breaks the site regardless of theme as its not compatible with webcomponents, and we default to a dark theme based on preferred colour-scheme #}
        <meta name="darkreader-lock">
        <title>{% block title %}{% trans title|default:brand.branding_title %}{% endblock %}</title>
        <link rel="icon" href="{{ brand.branding_favicon_url }}">
        <link rel="shortcut icon" href="{{ brand.branding_favicon_url }}">
        {% block head_before %}
        {% endblock %}
        <link rel="stylesheet" type="text/css" href="{% static 'dist/authentik.css' %}">
        <style>{{ brand_css }}</style>
        <script src="{% versioned_script 'dist/poly-%v.js' %}" type="module"></script>
        <script src="{% versioned_script 'dist/standalone/loading/index-%v.js' %}" type="module"></script>
        {% block head %}
        {% endblock %}
        {% for key, value in html_meta.items %}
        <meta name="{{key}}" content="{{ value }}" />
        {% endfor %}
    </head>
    <body>
        {% block body %}
        {% endblock %}
        {% block scripts %}
        {% endblock %}
    </body>
</html>
